<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!--
    @Describe 代码生成器生成
    @Author   Professor_Kong
    @Date     2019-05-21
    @Email    logwto@163.com
-->
<head>
    <meta charset="UTF-8">
    <title>User列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/scroll-bar.css">
    <link rel="stylesheet" href="/static/css/sub-page.css">
    <link rel="stylesheet" href="/static/lib/nprogress/nprogress.css">
</head>
<body>
<div class="ok-body">
    <!--面包屑导航区域-->
    <div class="ok-body-breadcrumb">
        <span class="layui-breadcrumb">
            <a><cite>首页</cite></a>
            <a><cite>常用页面</cite></a>
            <a><cite>代码生成器</cite></a>
        </span>
        <a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon layui-icon-refresh"></i>
        </a>
    </div>
    <!--模糊搜索区域-->
    <div class="layui-row">
        <form class="layui-form layui-col-md12 ok-search" id="searchForm">
            <div class="layui-form-item layui-inline" >
                <label class="layui-form-label" style="width: 68px;padding: 9px 2px">数据源名称</label>
                <div class="layui-input-block" style="margin-left: 80px">
                    <input style="height: 32px" type="text" id="name" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <div class="layui-input-block" style="margin-left: 40px">
                    <button class="layui-btn" style="height: 32px; line-height: 32px" lay-submit lay-filter="subFilter" id="subBtn">检索</button>
                    <button type="reset" style="height: 32px; line-height: 32px" class="layui-btn">重置</button>
                </div>
            </div>
        </form>
    </div>
    <!--工具栏-->
    <script  type="text/html" id="textBar">
        <button class="layui-btn layui-btn-normal" lay-event="batchEnable" >
            <i class="iconfont icon-shangsheng"></i>批量启用
        </button>
        <button class="layui-btn layui-btn-warm" lay-event="batchDisEnable">
            <i class="iconfont icon-web-icon-"></i>批量停用
        </button>
        <shiro:hasAnyPermissions name="user:add,user:update">
            <button class="layui-btn"  lay-event="add">
                <i class="layui-icon">&#xe61f;</i>添加
            </button>
        </shiro:hasAnyPermissions>
            <button class="layui-btn"  lay-event="update">
                <i class="layui-icon">&#xe642;</i>修改
            </button>
        <button class="layui-btn layui-btn-danger"  lay-event="delete" shiro:hasRole="admin" >
            <i class="layui-icon layui-icon-delete"></i>删除
        </button>
        <button class="layui-btn layui-btn-danger"  lay-event="executingForm" shiro:hasRole="admin" >
            <i class="layui-icon layui-icon-delete"></i>执行配置
        </button>

        <!--<span>共有数据：<i id="countNum"></i> 条</span>-->
    </script>
    <!--数据表格-->
    <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <input id="hidArea" hidden>
</div>
<!--js逻辑-->
<script src="/static/lib/layui/layui.js"></script>
<script src="/static/lib/nprogress/nprogress.js"></script>
<script th:inline="none">
    NProgress.start();
    window.onload = function () {
        NProgress.done();
    }
    layui.use(['element', 'table', 'form', 'jquery', 'laydate'], function () {
        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var laydate = layui.laydate;

        table.render({
            id:'reloadId',
            elem: '#tableId',
            url: '/sys/codeGenerator/findByParams',
            toolbar: '#textBar',
            limit: 10,
            page: true,
            cols: [[
                {type: 'checkbox'},
                // {field: 'status', title: '状态', width: 85, templet: '#statusTpl'},
                // {field: 'role', title: '角色', width: 100, templet: '#roleTpl'},
                {field:'id', title:'ID', width:80,  unresize: true, sort: true},
                {field:'name', title:'数据源名称', width:120},
                {field:'type', title:'数据库类型', width:120 ,templet:function (rowData) {
                        if(rowData.type== 1){
                            return ' <p style="font-weight:800 ;font-style: italic"> MySql </p> '
                        }
                        if(rowData== 2){
                            return ' <p style="font-weight:800 ;font-style: italic"> OraCle </p> '
                        }
                    }},
                {field:'dbName', title:'数据库名称', width:120},
                {field:'tableName', title:'表名', width:120 },
                {field:'ip',title:'IP',width:120},
                {field:'port',title:'Port',width:120},
                {field:'dbUsername', title:'数据库用户名', width:120},
                {field:'dbPassword', title:'数据库密码', width:120},
                {field:'createTime', title:'创建时间', width:120},
                {field:'status', title:'状态', width:120},
                {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150},
            ]]
            // ,done: function (res, curr, count) {
            //     $("#countNum").text(count);
            // }
        });

        //查询表单监听
        form.on('submit(subFilter)', function(data){
            // console.log(JSON.stringify(data.field));
            reloadTable(data.field);
            return false;
        });


        var operate;
        table.on('toolbar(tableFilter)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                // 写在这里可以避免表格重新加载带来的按钮绑定失效
                case 'add':
                    operate = layer.open({
                        type: 2,
                        maxmin: true,
                        shade: 0.5,
                        anim: 4,
                        area: ['90%', '90%'], //宽高
                        skin: 'layui-layer-rim', //加上边框
                        content:'/sys/codeGenerator/addOrUpdateIndex'
                    });
                    break;

                case 'update':
                    var data = checkStatus.data;
                    // console.log(data);
                    if(data.length != 1){
                        layer.alert("请确认选中一条记录！")
                        return false;
                    }
                    operate = layer.open({
                        type: 2,
                        maxmin: true,
                        shade: 0.5,
                        anim: 4,
                        area: ['90%', '90%'], //宽高
                        skin: 'layui-layer-rim', //加上边框
                        content:'/sys/codeGenerator/addOrUpdateIndex',
                    });
                    break;

                case 'delete':
                    var data = checkStatus.data;
                    if(data.length <= 0){
                        layer.alert("请至少选中一条记录！")
                        return false;
                    }
                    var array = new Array();
                    $.each(data,function (key,val) {
                        array.push(val.id)
                    })
                    if(array.length == 0){
                        return false;
                    }
                    layer.confirm('确定要删除选中数据吗？', {
                        skin: 'layui-layer-lan',
                        icon: 2, title: '提示', anim: 6,
                        btn: ['确定','取消'] //按钮
                    }, function(){
                        $.ajax({
                            url:'/sys/user/delByIds',
                            type:'post',
                            dataType:'json',
                            data:{"ids":array},
                            success: function (res) {
                                if(res.code== 1){
                                    layer.alert("操作异常，请联系管理员！")
                                }else{
                                    var objs=  $("#searchForm").serializeObject();
                                    reloadTable(objs);          //重载table
                                    layer.alert("操作成功！")    //弹出完成提示
                                }
                            }
                        })
                    }, function(){
                        //取消回调
                    });
                    break;

                case 'executingForm':
                    var data = checkStatus.data;
                    console.log(data);
                    if(data.length != 1){
                        layer.alert("请确认选中一条记录！")
                        return false;
                    }
                    $("#hidArea").val(JSON.stringify(data[0]));
                    operate = layer.open({
                        type: 2,
                        maxmin: true,
                        shade: 0.5,
                        anim: 4,
                        area: ['90%', '90%'], //宽高
                        skin: 'layui-layer-rim', //加上边框
                        content:'/sys/codeGenerator/executingForm',
                        end:function () {
                            $("#hidArea").val("");
                        }
                    });
                    break;
            };
        });

        //表格重载
        function reloadTable(formData){
            //执行重载
            table.reload('reloadId', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                                 
                }
            });
        }

        //定义serializeObject方法，序列化表单
        $.fn.serializeObject = function() {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function() {
                if (o[this.name]) {
                    if (!o[this.name].push) {
                        o[this.name] = [ o[this.name] ];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };

    })
</script>

</body>

</html>
